<style lang="scss">
  @import "../../../assets/css/_variable";

  .welcome .tip {
    height: 100px;
    background-color: $color-khan-blue;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .welcome .samples .cell {
    width: 100%;
    height: 60px;
    margin: 0;
  }
</style>
<template>
  <div class="welcome">
    <xy-header></xy-header>
    <div class="tip">
      <span class="color-white">Free！</span>
      <span class="color-white">登录后提供更多学习线索以及记录学习路径！</span>
    </div>
    <div class="samples margin-top-normal">
      <template v-for="sample in samples">
        <el-button class="cell" @click="goExercise(sample.id)">{{sample.name}}</el-button>
      </template>
    </div>
  </div>
</template>

<script>
  import XyHeader from './components/XyHeader.vue';

  export default {
    components: {
      XyHeader
    },
    data() {
      return {
        solving: true,
        samples: [
          {id: '4618d2e8623444e491f6fa3f2240014f', name: '小数乘整数'},
          {id: '4618d2e8623444e491f6fa3f2240014f', name: '小数乘小数'},
          {id: '4618d2e8623444e491f6fa3f2240014f', name: '积的近似值'},
        ]
      }
    },
    computed: {},
    methods: {
      /**
       * 如果已经登录直接跳转个人主页
       */
      signed() {
        if(this.$store.state.app.currentUser.token){
          //跳转
          this.$router.push({name:'我'});
        }
      },
      goExercise(mission) {
        let url = this.$store.state.app.api.el + 'task/getTaskByMission?student='
          + global_guest + '&mission=' + mission;
        this.$router.push({path: 'exercise', query: {url}});
      }
    },
    mounted() {
      this.signed();
    }
  }
</script>
